<template>
  <m-page>
    <!-- 快乐流水贷广告页 -->
    <m-header title="流水贷广告页">
      <div class="g-header">
        <div class="g-tag" @click="handleMore">
          <ynet-tag
            size="large"
            shape="circle"
            type="fill"
            fill-color="grey"
            font-color="#ccc"
            >了解更多</ynet-tag
          >
        </div>

        <div class="g-name">
          <b>快乐流水贷</b><br />
          <span>转为小微企业主（含个体工商户）量身定制</span>
        </div>
        <div class="g-limit">
          <p>
            最高可借（元）
            <b>3000,000.00</b>
          </p>
        </div>
        <div class="g-trait">
          <div>
            <span class="g-img"></span><br />
            <span>分秒批货</span>
          </div>

          <div>
            <span class="g-img"></span><br />
            <span>纯线上审批</span>
          </div>

          <div>
            <span class="g-img"></span><br />
            <span>随借随还</span>
          </div>

          <div>
            <span class="g-img"></span><br />
            <span>无办理费用</span>
          </div>
        </div>
      </div>
      <!-- 时间轴 -->
      <div class="g-time">
        <div class="g-time-name">
          <span>-</span><b>贷款流程</b><span>-</span>
        </div>
        <div class="g-time-line">
          <ynet-steps :steps="steps2"></ynet-steps>
        </div>
      </div>
      <!-- 按钮 -->
      <div class="g-button" @click="isApply">
        <ynet-button type="warning">立即申请</ynet-button>
      </div>
      <!-- 温馨提示 -->
      <div class="g-tip">
        <p>
          <b>温馨提示：</b><br>
          办理本业务不会收取任何代办费用，我行未授权任何第三方机构或个人代办<br>
          快乐流水贷业务
        </p>
      </div>
    </m-header>
  </m-page>
</template>

<script>
import { Button, Tag, Steps } from "ynet-mobile";
import { queryLimit } from "../request";
export default {
  components: {
    [Button.name]: Button,
    [Tag.name]: Tag,
    [Steps.name]: Steps
  },
  data() {
    return {
      steps: [
        { name: "额度申请" },
        { name: "系统审批" },
        { name: "材料补充" },
        { name: "审批发放" }
      ],
      steps2: [
        { name: "额度申请", text: "预计15分钟" },
        { name: "系统审批", text: "预计10分钟" },
        { name: "材料补充", text: "预计5分钟" },
        { name: "审批发放", text: "预计30分钟" }
      ]
    };
  },
  async created() {
    this.isLogin();
  },
  methods: {
    // 了解更多
    handleMore() {
      // 跳转到快乐流水贷介绍页
      app.api.pushWindow("water_borrowed/home_introduction_page.html");
    },
    // 流水贷点击逻辑
    isApply() {
      // 申请信息，申请审批信息，额度激活信息
      queryLimit
        .then(res => {
          console.log(JSON.stringify(res));
          // 未申请流水贷
          if (未申请流水贷) {
            app.api.pushWindow("water_borrowed/home_index.html");
          } else if (预审阶段) {
            app.api.pushWindow(
              "water_borrowed/home_antecedent_trial_results.html"
            );
          } else if (终审阶段) {
            app.api.pushWindow(
              "water_borrowed/home_last_instance_results.html"
            );
          } else if (通过) {
            app.api.pushWindow("water_borrowed/home_activation_page.html");
          }
        })
        .catch(err => {
          console.log(JSON.stringify(err));
        });
    },
    // 判断是否加挂银行卡
    isBinding() {
      // 调用接口判断是否加挂银行卡
      if (加挂) {
        // 跳转到流水贷额度申请页面
        app.api.pushWindow("water_borrowed/quota_information_entry.html");
      } else {
        app.api
          .confirm(
            "为了监管要求，快乐流水贷申请需要您在e钱庄绑定银行卡",
            "提示",
            {
              okButton: "立即绑定",
              cancelButton: "暂不绑定"
            }
          )
          .then(res => {
            if (res.ok) {
              // 走加挂银行卡流程
            } else {
              // 留在当前页面
            }
          });
      }
    },
    handClick() {
      // 判断是否绑定银行卡
      this.isBinding();
      // 跳转到身份信息认证页文件夹
      app.api.pushWindow("water_borrowed/quota_identity_authentication.html");
    }
  },
  mounted() {},
  watch: {},
  computed: {}
};
</script>

<style lang="scss" scoped>
@import "./index.scss";
</style>
